<template>
	<view class="content">
		<!-- 顶部标签组件 -->
		<view class="safeContent">
			编辑
		</view>
		<view class="headshot">
			<view class="headshotIcon">
			</view>
			<image class="avatar" src="../../static/logo.png" mode=""></image>
		</view>
		<view class="storeInfo">
			<view class="item">
				<view class="itemTitle">店铺名称</view>
				<input v-model="shopName" type="text" class="itemVal">
			</view>
			<view class="item">
				<view class="itemTitle">服务商类型</view>
				<button class="Buy_now">
				</button>
			</view>
			<view class="item">
				<view class="itemTitle">月交易量级</view>
				<input v-model="monthVal" type="text" class="itemVal">
			</view>
			<view class="item">
				<view class="itemTitle">邮箱联系方式</view>
				<input v-model="mailbox" type="text" class="itemVal">
			</view>
			<view class="item">
				<view class="itemTitle">店铺简介</view>
				<textarea v-model="shopSynopsis" auto-height="true" class="txts itemVal"></textarea>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted } from 'vue';
	import { ref } from 'vue'
	import {getServiceSuccess} from '@/api/service'
	const shopName = ref('顺风顺水顺财神')
	const monthVal = ref('少于10000USDT')
	const mailbox = ref('fwkoi232@gmail.com')
	const shopSynopsis = ref('选我，我成交快、体量大。迅速的互惠互利，合作共赢！选我，我成交快、体量大。迅速的互惠互利，合作共赢！')
	
	onMounted(async()=>{
		const rel = await getServiceSuccess()
		console.log(rel)
	})
</script>

<style lang="scss" scoped>
	@property --direc {
		syntax: '<angle>';
		inherits: false;
		initial-value: 0deg;
	}

	.Buy_now {
		width: 200px;
		height: 88px;
		color: #fff;
		margin-left: 0;
		// text-align: center;
		--direc: 0deg;
		background-image: linear-gradient(var(--direc), #99F5DA, #83AAE1, #6953E9, #A82DC0);
		animation: rotate 3s linear infinite;
		border-radius: 16px;
	}

	.Buy_now::before {
		content: '';
		position: absolute;
		inset: 4px;
		background-color: #000001;
		border-radius: inherit;
	}

	.Buy_now::after {
		content: 'USDT服务商';
		font-size: 50px;
		position: absolute;
		inset: 4px;
		z-index: 1;
		margin-top: 15px;
		// top: 50%;
		// transform: rotateY(-50%);
		line-height: 88px;
	}

	@keyframes rotate {
		to {
			--direc: 360deg
		}
	}

	.content {
		min-height: 100vh;
			.safeContent{
				font-size: 28px;
				color: #21F5EA;
				padding-top: 32px ;
				padding-right: 32px ;
				box-sizing: border-box;
				text-align: right;
			}
		.headshot {
			width: 160px;
			height: 160px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
			border: 2px solid rgba(255, 255, 255, 0.4);
			margin: 68px auto 40px;
			position: relative;
			.avatar{
				height: 100%;
				width: 100%;
				border-radius: 50%;
			}
			.headshotIcon {
				width: 48px;
				height: 48px;
				background: linear-gradient(151deg, #06FFDD 0%, #4E47FF 100%);
				border-radius: 50%;
				position: absolute;
				bottom: -1px;
				right: -1px;
				z-index: 100;
			}
		}

		.storeInfo {
				padding-bottom: 88px;
			>.item {
				padding-left: 32px;
				padding-right: 32px;
				display: flex;
				flex-direction: column;
				margin-bottom: 30px;

				.itemTitle {
					width: calc(100% - 64px);
					font-size: 24px;
					font-family: PingFangSC, PingFang SC;
					color: #FFFFFF;
					line-height: 35px;
					margin-bottom: 16px;
				}

				.itemVal {
					width: calc(100% - 64px);
					min-height: 88px;
					// height: auto;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 16px;
					border: 2px solid rgba(255, 255, 255, 0.6);
					padding-left: 32px;
					padding-right: 32px;
					font-size: 28px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40px;
					letter-spacing: 1px;
				}

				.txts {
					padding-top: 24px;
					padding-bottom: 24px;
					min-height: 120px;
					height: auto;
					word-wrap: break-word;
				}
			}
		}

		
	}
</style>